/* 
1 点击 “+” 触发tap点击事件
  1 调用小程序内置的 选择图片的 api
  2 获取到 图片的路径  数组
  3 把图片路径 存到 data的变量中
  4 页面就可以根据 图片数组 进行循环显示 自定义组件
2 点击 自定义图片 组件
  1 获取被点击的元素的索引
  2 获取 data中的图片数组
  3 根据索引 数组中删除对应的元素
  4 把数组重新设置回data中
3 点击 “提交”
  1 获取文本域的内容 类似 输入框的获取
    1 data中定义变量 表示 输入框内容
    2 文本域 绑定 输入事件 事件触发的时候 把输入框的值 存入到变量中 
  2 对这些内容 合法性验证
  3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片外网的链接
    1 遍历图片数组 
    2 挨个上传
    3 自己再维护图片数组 存放 图片上传后的外网的链接
  4 文本域 和 外网的图片的路径 一起提交到服务器 前端的模拟 不会发送请求到后台。。。 
  5 清空当前页面
  6 返回上一页 
 */
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: [{
        id: 0,
        name: '体验问题',
        isActive: true
      },
      {
        id: 1,
        name: '商品商家、投诉',
        isActive: false
      }
    ],
    // 存储图片路径
    chooeseImageUrl: [],
    // 文本框输入的内容
    textVal: ''
  },
  // 存放外网的图片路径
  uploadUrl: [],
  // 点击切换tab激活状态
  handleChangeActive(e) {
    // 获取索引
    let {
      index
    } = e.detail
    let {
      tabs
    } = this.data
    tabs.forEach((v, i) => {
      i === index ? v.isActive = true : v.isActive = false
    })
    this.setData({
      tabs
    })
  },
  // 上传图片
  uploadImage() {
    wx.chooseImage({
      count: 3, // 默认为9
      sizeType: ['original', 'compressed'], // 指定原图或者压缩图
      sourceType: ['album', 'camera'], // 指定图片来源
      success: (res) => {
        this.setData({
          // 数组拼接 旧数组和新数组拼接
          chooeseImageUrl: [...this.data.chooeseImageUrl, ...res.tempFilePaths]
        })
      }
    })
  },
  // 删除图片
  removePic(e) {
    // 获取被删除的图片ID
    const {
      index
    } = e.currentTarget.dataset
    // 获取图片数组
    let {
      chooeseImageUrl
    } = this.data
    chooeseImageUrl.splice(index, 1)
    this.setData({
      chooeseImageUrl
    })
  },
  handleSubmitText(e) {

    // 1 获取文本域的内容 类似 输入框的获取
    const textVal = e.detail.value
    // 1 data中定义变量 表示 输入框内容
    this.setData({
      textVal
    })
  },
  // 点击提交
  handleSubmit() {
    const {
      textVal,
      chooeseImageUrl
    } = this.data
    // 合法校验
    if (!textVal.trim()) {
      wx.showToast({
        title: '请输入合法的内容',
        icon: 'none'
      })
      return
    }

    wx.showLoading({
      title: '正在上传中',
      icon: 'none'
    })
    // 3 验证通过 用户选择的图片 上传到专门的图片的服务器 返回图片外网的链接
    // 不支持多个同时上传 可以遍历数组挨个上传

    // 判断是否只是上传了文本
    if (chooeseImageUrl.length != 0) {
      chooeseImageUrl.forEach((v, i) => {
        wx.uploadFile({
          // 图片要上传到哪里
          // 3 自己再维护图片数组 存放 图片上传后的外网的链接
          url: 'https://images.ac.cn/Home/Index/UploadAction/',
          // 图片的路径
          filePath: v,
          // 上传文件的名称
          name: 'file',
          // 文本信息
          formData: {},
          success: (res) => {
            const url = JSON.parse(res.data)
            this.uploadUrl.push(url)
            // 所有图片都上传完毕才触发
            if (i === chooeseImageUrl.length - 1) {
              wx.hideLoading();
              console.log("把文本提交到外网中");
              // 提交成功重置页面
              this.setData({
                textVal: '',
                chooeseImageUrl: []
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
            }
          }
        })
      })
    } else {
      wx.hideLoading();
      console.log("只是上传了文本");
      wx.navigateBack({
        delta: 1
      });
    }

  }
})